<template>
  <div class="login">
    <Header>
      <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
      <div class="login-title">登录</div>
      <template v-slot:icon-r><img src="@/assets/images/home.png" alt="" class="icons"></template>
    </Header>
    <section>
      <div>
        <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*">
      </div>
      <div class="checkout">
        <input type="text" placeholder="请输入验证码" pattern="[0-9]*" v-model="codeVal">
        <button @click="sendCode" :disabled="disabled">{{ this.msgCode }}</button>
      </div>
      <div class="login-btn" @click="login">登录</div>
      <div class="tab">
        <span @click="goUserLogin">密码登录</span>
        <span @click="goRegister">快速注册</span>
      </div>
    </section>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { Toast } from 'vant';
import { mapMutations } from 'vuex';
export default {
  components: {
    Header
  },
  data() {
    return {
      userTel: '',
      rules: {
        //手机验证规则
        userTel: {
          rule: /^1[23456789]\d{9}$/,
          msg: '手机号不能为空,并且是11位数字'
        }
      },
      //发送短信按钮禁用
      disabled: false,
      //倒计时
      codeNum: 6,
      //获取验证码按钮内容
      msgCode: '获取短信验证码',
      //随机验证码
      code: null,
      //用户输入验证码
      codeVal: ''
    }
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.push({ name: 'my' })
    },
    goUserLogin() {
      this.$router.push({ name: 'userLogin' })
    },
    //发送短信验证码
    sendCode() {
      //生成验证码
      this.code = Math.floor(Math.random() * 9000 + 1000)
      //验证手机号格式
      if (!this.validate('userTel')) return
      //发送验证码请求
      this.$axios({
        url: 'http://dfsns.market.alicloudapi.com/data/send_sms',
        method: 'post',
        headers: {
          Authorization: "APPCODE b44e5ef6db81492490a354db1efba8ff"
        },
        data: {
          content: `code:${this.code}`,
          template_id: 'TPL_0000',
          phone_number: this.userTel
        }
      }).then(res => {
        if (res.status == 200) {
          Toast('验证码已发送')
        }
      })
      //禁用按钮
      this.disabled = true
      let timer = setInterval(() => {
        //倒计时
        this.msgCode = `${this.codeNum} 后重新发送`
        this.codeNum = --this.codeNum
        if (this.codeNum < 0) {
          clearInterval(timer)
          this.msgCode = `获取短信验证码`
          this.codeNum = 6
          this.disabled = false
        }
      }, 1000);
    },
    //校验
    validate(key) {
      let bool = true
      if (!this.rules[key].rule.test(this[key])) {
        //提示信息
        Toast(this.rules[key].msg)
        bool = false
        return false
      }
      return bool
    },
    //登录
    login() {
      //验证码错误
      if (this.code != this.codeVal) return Toast('验证码错误')
      //验证码正确
      this.$axios({
        url: '/api/addUser',
        method: 'post',
        data: {
          phone: this.userTel
        }
      }).then(res => {
        Toast(res.data.msg)
        if (!res.data.success) return
        //登录成功,存储个人信息
        this.USER_LOGIN(res.data.data)
        this.$router.push({ name: 'my' })
      })
    },
    //快速注册
    goRegister() {
      this.$router.push({ name: 'register' })
    },
    ...mapMutations([
      'USER_LOGIN'
    ])
  },
  created() { },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.login {
  .header {
    color: #fff;

    .login-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 20%);
      color: #fff;
    }

    .icons {
      width: .8rem;
      height: .8rem;
    }

    ::v-deep .icon-l {
      width: auto;
    }
  }

  section {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.2rem);
    align-items: flex-start;
    padding: .5333rem;

    div {
      width: 100%;
      height: 1.1733rem;
      margin-top: .5rem;
      border-radius: 3px;
      box-shadow: 0 0 0 1px #d7d7d7;

      input {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 .2667rem;
        background-color: #fff;
      }
    }

    .login-btn {
      border: none;
      margin-top: .5rems;
      background-color: #b0352f;
      width: 100%;
      height: 1.2rem;
      border-radius: .08rem;
      color: #fff;
      text-align: center;
      line-height: 1.2rem;
    }

    .checkout {
      display: flex;
      justify-content: space-between;

      button {
        font-size: .3733rem;
        width: 5.4rem;
        background-color: #b0352f;
        border: none;
        border-radius: 3px;
        color: #fff;
      }
    }

    .tab {
      display: flex;
      justify-content: space-between;
      font-weight: 500;
      border: none;
      box-shadow: none;
    }
  }
}
</style>
